<template>
  <div class="data_title">
    <i class="iconfont icon-shujukanban"></i>
    <h2>用户列表</h2>
  </div>
  <el-table :data="tableData" stripe style="width: 80%">
    <el-table-column prop="index" label="序号" width="180" />
    <el-table-column prop="name" label="用户名" width="180" />
    <el-table-column prop="user" label="登录名" width="180" />
    <el-table-column prop="date" label="登记日期" width="180" />
    <el-table-column prop="mark" label="备注" />
    <el-table-column fixed="right" label="操作" width="120">
      <template #default>
        <el-button type="text" size="small" @click="handleClick">修改</el-button>
        <el-button type="text" size="small" @click="handleClick">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="bt_add">
    <el-button type="primary" :icon="CirclePlus" @click="AddUser">增加</el-button>
  </div>
</template>

<script setup>
import { CirclePlus } from '@element-plus/icons-vue'
import VueEvent from '../utils/event';
import { ref, onMounted } from 'vue';
import { getUserList } from '../api/user'
// import {reqUser} from '../api/request'

const AddUser = () => {
  //先判断数组的值有没有大于10,大于10提示用户:最大用户数10;,再进行数据增加
  if (tableData.length > 10) {
    alert("最大用户数为10,请删除多余用户重试")
  } else {
    const web_name = "AddUser";
    VueEvent.emit("tomsg", { web_name });
  }
}

const tableData = [
  {
    index: '0',
    name: '曾伟',
    user: 'admin',
    date: '2016-05-03',
    mark: '普通用户'
  },
  {
    index: '1',
    name: '曾伟',
    user: 'admin',
    date: '2016-05-03',
    mark: '普通用户'
  },
  {
    index: '2',
    name: '曾伟',
    user: 'admin',
    date: '2016-05-03',
    mark: '普通用户'
  },
  {
    index: '3',
    name: '曾伟',
    user: 'admin',
    date: '2016-05-03',
    mark: '普通用户'
  },
]

const userList = []

onMounted(async () => {
  const pageSize = ref(10);
  const pageNum = ref(1);
  console.log(pageNum.value, pageNum.value);
  await getUserList({ pageSize: pageSize.value, pageNum: pageNum.value }).then(res => {
    console.log(res);
    userList.value = res.data
    console.log(userList);
  })
})
</script>

<style>
.bt_add {
  position: absolute;
  right: 22%;
  top: 20px;
}
</style>